<template>
	<div class="question-item" v-if="question">
		<div class="question-container-main">
			<el-checkbox :label="question.id" :disabled="checkBoxDisabled" v-if="showCheckBox" v-model="selected" @change="checkBoxChange"></el-checkbox>
			<single-question :qIndex="qIndex" v-if="question.questionType == 2" :question="question" :showUserAnswer="showUserAnswer">
			</single-question>
			<award-winning-question :qIndex="qIndex"  v-else-if="question.questionType == 4" :question="question" :showUserAnswer="showUserAnswer"
				@userScoreInput="userScoreInput" @commentInput="commentInput">
			</award-winning-question>
			<material-question :qIndex="qIndex"  v-else-if="question.questionType == 7" :question="question" 
				:showUserAnswer="showUserAnswer" @subUserScoreInput="subUserScoreInput" @subCommentInput="subCommentInput">
				<template slot="sub-footer" slot-scope="sData">
					<slot name="materialFooter" :sIndex="sData.sIndex" :subQuestion="sData.subQuestion">
						
					</slot>
				</template>
			</material-question>
		</div>
		<slot name="footer">
			
		</slot>
	</div>
	<div class="question-item" v-else>
		<div class="no-question">
			<i class="iconfont icon-wushuju"></i>
			<div class="no-data-text">暂无数据</div>
			<div class="no-data-operate">
				<slot name="noDataBtn"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	import SingleQuestion from "./components/SingleQuestion.vue";
	import AwardWinningQuestion from "./components/AwardWinningQuestion.vue";
	import MaterialQuestion from "./components/MaterialQuestion.vue";
	export default{
		name:"Question",
		props:{
			question:{
				//题目
				type:Object
			},
			qIndex:{
				//索引
				type:Number
			},
			fullIndex:{
				//全索引-多层 每一层用 - 隔开
				type:String
			},
			showCheckBox:{
				//是否显示复选框
				type:Boolean,
				default:false
			},
			checkBoxDisabled:{
				//复选框是否禁用
				type:Boolean,
				default:false
			},
			canEditScore:{
				//分数是否可编辑
				type:Boolean,
				default:true
			},
			isSelected:{
				//是否选中 -- 开启复选框的前提下
				type:Boolean,
				default:false
			},
			showUserAnswer:{
				type:Boolean,
				default:false
			},
		},
		mounted() {
			this.selected = this.isSelected;
		},
		watch:{
			isSelected(val){
				this.selected = this.isSelected;
			}
		},
		data(){
			return{
				selected:false,
			}
		},
		components:{
			"single-question":SingleQuestion,
			"award-winning-question":AwardWinningQuestion,
			"material-question":MaterialQuestion
		},
		methods:{
			checkBoxChange(id){
				this.$emit("change",this.selected,this.question);
			},
			//移动 删除 子题 jndex 子题索引
			moveSubDown(question,jndex){
				this.$emit("moveSubDown",question,jndex,this.qIndex,this.fullIndex);
			},
			moveSubUp(question,jndex){
				this.$emit("moveSubUp",question,jndex,this.qIndex,this.fullIndex);
			},
			delSubQuestion(question,jndex){
				this.$emit("delSubQuestion",question,jndex,this.qIndex,this.fullIndex);
			}
			//修改子题分数
			,scoreSubChange(question,score,jndex){
				this.$emit("scoreSubChange",question,score,jndex,this.qIndex,this.fullIndex);
			},
			userScoreInput(){
				//问答题打分
				this.$emit("userScoreInput",this.question);
			},
			commentInput(){
				//问答题评论
				this.$emit("commentInput",this.question);
			},
			subUserScoreInput(question,qIndex){
				//子题问答题打分
				this.$emit("subUserScoreInput",question,qIndex);
			},
			subCommentInput(question,jndex){
				//子题问答题评论
				this.$emit("subCommentInput",question,jndex,this.qIndex,this.fullIndex);
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.question-item{
		width: 100%;
		min-height: 100px;
		background: #FFFFFF;
		border: 1px solid #EBEEF6;
		box-sizing: border-box;
		box-sizing: border-box;
		margin-top: 16px;
		@include flex-column(flex-start, flex-start);
		.question-container-main{
			@include flex-row(flex-start, flex-start);
			width: 100%;
			box-sizing: border-box;
			padding: 16px;
			flex: 1;
		}
		
		::v-deep .el-checkbox__label{
			display: none;
		}
		::v-deep .el-checkbox__input{
			margin-right: 8px;
		}
		.no-question{
			width: 100%;
			height: 200px;
			@include flex-column(center, center);
			.icon-wushuju{
				font-size: 32px;
				color: #666666;
			}
			.no-data-text{
				color: #666666;
				margin-top: 8px;
				margin-bottom: 24px;
			}
		}
	}
</style>
